import React, { FC } from "react";
import { Input } from "antd";
import Marquee from 'react-fast-marquee';
import './index.scss';

interface Props {
  value: string;
  onChange: (keyword: string) => void;
}

const SearchBar : FC<Props> = props => {

  const { onChange, value = '' } = props;

  return (
    <>
      <Marquee
        className="marquee-word"
        pauseOnHover
        direction="left"
        gradient={false}
      >
        1. 右键点击图片可以 [下载] [预览] [设置为壁纸] 等操作.
        2. 预览图片点击[ESC] 按钮可以退出预览.
        3. 右键点击图片,点击图片详情,如果有内容说明存在高清图片.
        4. [高清图片]尚未完全爬取成功, 正在努力解决中...
      </Marquee>
      <Input
        className="search-bar-wrap"
        onChange={(event) => {
          const { value } = event.target;
          onChange(value);
        }}
        placeholder="请输入搜索关键字"
        allowClear
        value={value} />
    </>
  )
}

export default SearchBar;
